<template>
  <div class="app-container">
    <el-row :gutter="20" align="middle" type="flex">
      <el-col :span="15">
        <el-col :span="7" class="current-time">
          <real-date-time :show-seconds="true"/>
        </el-col>
      </el-col>
      <!--      v-if="progressCtl.isProd&&!progressCtl.isStart"-->
      <el-col :span="9">
        <el-button v-if="progressCtl.isProd&&!progressCtl.isStart" :disabled="closes "
                   icon="el-icon-s-flag"
                   size="mini" style="position: absolute;right: 32%;"
                   type="primary"
                   @click="openKai()"
        > 生产调度
        </el-button>
        <div class="dropdown" style="display: flex; align-items: center;">
          <span class="frequency">刷新频率:</span>
          <el-dropdown class="dropdown" size="small" split-button type="primary" @command="handleCommand">
            {{ selectedTime }}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="time in timeOptions" :key="time" :command="time">{{ time }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <!--    生产任务数据-->
    <el-row :gutter="20" class="top-box" style="margin-top: 10px;">
      <el-col :span="15" :xs="24" style="max-height: 250px;">
        <el-row class="row-bg" justify="space-around" type="flex">
          <el-col :span="6" class="task-container" style="margin-left: 50px;">
            <div class="grid-content bg-purple">
              <el-row class="row-bg" justify="space-around" style="margin-bottom:20px; font-size:12px;" type="flex">
                ( {{ progressCtl.totalFinished || "-" }} )
              </el-row>
              <el-row class="row-bg" justify="space-around" type="flex">
                <el-progress :color="progressColors" :format="taskFormat" :percentage="progressCtl.task"
                             :strokeWidth="12" style="cursor: default;" type="dashboard"></el-progress>
              </el-row>
              <el-row class="row-bg" justify="space-around" style="font-weight:700;" type="flex">总任务量</el-row>
            </div>
          </el-col>

          <el-col :span="6" class="task-container" style="margin-right:50px;">
            <el-popover
              :disabled="!taskProgress.processNeedPeoples||taskProgress.processNeedPeoples.length==0"
              placement="right"
              title="人工信息"
              trigger="hover"
              width="500"
            >
              <div class="grid-content bg-purple-light">
                <el-row v-for="(item,index) in taskProgress.processNeedPeoples"
                        v-if="(cleanIntValue(item.currentPeoples)+cleanIntValue(item.needPeoples))>0" :key="index"
                        style="display:flex; align-items: center;justify-content: space-between;">
                  <div style="font-size:16px;margin-right:10px;width:80px;line-height:35px;">
                    {{ "工序" + item.processSequence + ":" }}
                  </div>
                  <div style="width:300px; ">
                    <el-progress :color="laborListColors"
                                 :format="()=>stepFormat(item)"
                                 :percentage="getLaborPerc(item)"
                    ></el-progress>
                  </div>
                  <!--                  v-if="cleanIntValue(item.needPeoples)>0"-->
                  <div style="width:100px;display: flex;justify-content: center;">
                    <el-button v-if="cleanIntValue(item.needPeoples)>0" icon="el-icon-user" round size="mini"
                               type="primary"
                               @click="openLaborAllocate(item)">分配人工
                    </el-button>
                    <!--                  v-if="cleanIntValue(item.needPeoples)>0"-->
                  </div>

                </el-row>
              </div>
              <div slot="reference" class="grid-content bg-purple">
                <el-row class="row-bg" justify="space-around" style="margin-bottom:20px; font-size:12px;" type="flex">
                  {{ "当前人工/所需人工" }}
                </el-row>
                <el-row class="row-bg" justify="space-around" type="flex">
                  <el-progress :color="laborListColors" :format="laborFormat" :percentage="getTotalLaborPerc()"
                               :strokeWidth="12"
                               style="cursor: default;" type="dashboard"></el-progress>
                </el-row>
                <el-row class="row-bg" justify="space-around" style="font-weight:700;" type="flex">总人工数</el-row>
              </div>
            </el-popover>
            <!--            <div class="grid-content bg-purple-light car-process-container" style="max-height: 250px;overflow-y:auto;"-->
            <!--                 ref="scrollContainer"-->
            <!--                 @mouseenter="pauseScroll"-->
            <!--                 @mouseleave="resumeScroll"-->
            <!--            >-->
            <!--              &lt;!&ndash;              <el-row type="flex" class="row-bg" justify="space-around" style="margin-bottom:20px;">当前车序进度-->
            <!--                            </el-row>-->
            <!--                            <el-row type="flex" class="row-bg" justify="space-around">-->
            <!--                              <el-progress type="dashboard" :percentage="progressCtl.step" :color="progressColors"-->
            <!--                                           :format="stepFormat"></el-progress>-->
            <!--                            </el-row>-->
            <!--                            <el-row type="flex" class="row-bg" justify="space-around">{{ progressCtl.stepName }}</el-row>&ndash;&gt;-->
            <!--              <el-row style="display:flex; align-items: center;justify-content: space-between; margin-bottom:5px;"-->
            <!--                      v-for="(item,index) in taskProgress.processNeedPeoples" :key="index" v-if="(cleanIntValue(item.currentPeoples)+cleanIntValue(item.needPeoples))>0">-->
            <!--                <div style="font-size:16px;margin-right:10px;width:60px;" >{{ "工序" + item.processSequence + ":" }}</div>-->
            <!--                <div style="width:200px;">-->
            <!--                  <el-progress :color="laborListColors"-->
            <!--                               :percentage="getLaborPerc(item)"-->
            <!--                               :format="()=>stepFormat(item)"-->
            <!--                  ></el-progress>-->
            <!--                </div>-->
            <!--                <div style="width:100px">-->
            <!--                  <el-button @click="openKai()" size="mini" type="primary" icon="el-icon-user" round v-if="cleanIntValue(item.needPeoples)>0">分配人工</el-button>-->
            <!--&lt;!&ndash;                  v-if="cleanIntValue(item.needPeoples)>0"&ndash;&gt;-->
            <!--                </div>-->

            <!--              </el-row>-->
            <!--            </div>-->
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="text-title">
                <div>当前生产节拍</div>
                <div v-if="progressCtl.isStart" style="font-size:12px;">
                  (计划节拍:{{
                    parseInt(taskProgress.standardBeat / 60) + "分" + taskProgress.standardBeat % 60 + "秒"
                  }})
                </div>
              </div>
              <div :style="getBGstyle(0)"
                   class="text-hl">
                <div v-if="progressCtl.isStart">
                  {{ parseInt(taskProgress.realTimeBeat / 60) + "分" + taskProgress.realTimeBeat % 60 + "秒" }}
                </div>
                <div v-else>
                  -
                </div>
              </div>
              <div class="text-title" style="margin-top:30px;">拉动倒计时</div>
              <div :style="getBGstyle(1)"
                   class="text-hl">
                <div v-if="progressCtl.isStart">
                  {{ parseInt(progressCtl.shiftTime / 60) + "分" + progressCtl.shiftTime % 60 + "秒" }}
                </div>
                <div v-else>
                  -
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 更改为至显示当前任务数量-->
        <!--        <el-table
                  :data="taskListWithEmptyRows"
                  border
                  height="100%"
                  style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="生产任务"
                    header-align="center"
                    align="center" width="180px">
                  </el-table-column>
                  <el-table-column
                    prop="totalCar"
                    label="总任务车辆"
                    header-align="center"
                    align="center" min-width="90px">
                  </el-table-column>
                  <el-table-column
                    prop="completedCar"
                    label="已完成车辆"
                    header-align="center"
                    align="center" min-width="90px">
                  </el-table-column>
                  <el-table-column
                    prop="incompleteCar"
                    label="未完成车辆"
                    header-align="center"
                    align="center" min-width="90px">
                  </el-table-column>
                  <el-table-column
                    prop="startTime"
                    label="开始时间"
                    header-align="center"  width="170px"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="endTime"
                    label="结束时间"
                    header-align="center" width="170px"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="layingAcStartTime"
                    v-if="isSameDay"
                    label="铺线实际开始时间"
                    header-align="center"  width="170px"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="acStartTime"
                    v-else
                    label="实际开始时间"
                    header-align="center"  width="170px"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="layingAcEndTime"
                    v-if="isSameDay"
                    label="铺线实际结束时间"
                    header-align="center" width="170px"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="acEndTime"
                    v-else
                    label="实际结束时间"
                    header-align="center" width="170px"
                    align="center">
                  </el-table-column>


                  <el-table-column label="操作" fixed="right" width="100px" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="{ row, $index }">
                      <el-button @click="openKai(row)" size="mini"
                                v-if=" $index === 0 && row.name!=null && (isSameDay ? row.layingAcStartTime == null : row.acStartTime == null) "
                                 :disabled="closes "
                                 type="text" icon="el-icon-s-flag" > 生产调度  </el-button>
                    </template>
                  </el-table-column>

                </el-table>-->
      </el-col>
      <el-col :span="9" :xs="24" style="max-height: 250px; overflow-y: auto;">
        <el-table
          ref="myTable"
          :data="solutionListWithEmptyRows"
          border
          height="100%"
          style="width: 100%"
          @cell-mouse-enter="stopScrollFn"
          @cell-mouse-leave="autoScrollFn">
          <el-table-column
            align="center"
            header-align="center"
            label="车序"
            prop="carOrder"
            width="100px">
          </el-table-column>
          <el-table-column
            header-align="center"
            label="实时调度建议"
            min-width="130px" prop="solutionDescribe" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-divider class="el-divider1"></el-divider>


    <!--    机器人信息 @shy 2025.5.12-->
    <el-row class="robInfo" style="margin-bottom: 10px;">
      <!--    产线总览 @shy 2025.5.12-->
      <div class="test-buttons">
        <el-button v-if="testFlag" size="mini" style="z-index: 999;" type="primary" @click="dispatchSeam()">完成焊缝
        </el-button>
        <el-button v-if="testFlag" size="mini" style="z-index: 999;" type="primary" @click="manualPull()">
          一键拉动
        </el-button>
        <el-button v-if="testFlag" size="mini" style="z-index: 999;" type="primary" @click="ctlListen()">
          {{ listenFlag ? "停止监听" : "监听拉动" }}
        </el-button>
        <el-button v-if="testFlag" size="mini" style="z-index: 999;" type="primary" @click="manualAllFinish()">
          一键完成拉动
        </el-button>
      </div>
      <div v-for="(item,index) in robList" v-if="index%2===0"
           :key="index"
           :style="'left:'+item.location.x+';'"
           class="robItem">
        <rob-tag :plan-takt="cleanIntValue(taskProgress.standardBeat)" :seam-info="seamSendInfo" :tag-data="item"
                 :test-flag="testFlag"
        ></rob-tag>
      </div>
    </el-row>
    <!--    呼吸灯 @shy 2025.5.12-->
    <el-row class="light-line">
      <div v-for="(item,index) in procPos"
           :key="index"
           :style="'left:'+item.position.x+';'+('bottom'==item.position.y?'bottom:0':('top:'+item.position.y))+';transform:rotate('+item.position.rotate+') translateX('+item.position.translateX+');'"
           class="light-container">
        <el-popover
          :placement="item.position.popPos"
          title="工位信息"
          trigger="hover"
          width="200"
        >
          <div style="display:flex;justify-content: space-between;">
            <div>工位类型:</div>
            <div>{{ item.processType == 1 ? "机器人" : "人工" }}</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>工位名称:</div>
            <div>{{ item.processName }}</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>初始人工:</div>
            <div>{{ item.initialPeople }}</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>最大人工:</div>
            <div>{{ item.maxPeople }}</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>当前人工:</div>
            <div>{{ item.currentPeople }}</div>
          </div>
          <div v-if="item.active">
            <div style="font-size:16px;margin-top: 15px;">工件信息</div>
            <div style="display:flex;justify-content: space-between;">
              <div>车序:</div>
              <div>{{ item.carNum }}</div>
            </div>
            <div style="display:flex;justify-content: space-between;">
              <div>编号:</div>
              <div>{{ item.prodNum }}</div>
            </div>
            <div style="display:flex;justify-content: space-between;">
              <div>名称:</div>
              <div>{{ item.prodName }}</div>
            </div>
          </div>
          <div slot="reference" class="process-title" style="cursor: default;">{{ item.title }}</div>
        </el-popover>

        <!--        工位呼吸灯-->
        <div :class="'breathing-light '+(item.active?'active':'')"></div>
        <!--        <div :class="'breathing-light '+(item.active?'':'active')"></div>-->
      </div>
      <div v-for="(item,index) in pullPos"
           :key="(index+procPos.length)"
           :style="'left:'+item.position.x+';'+('bottom'==item.position.y?'bottom:0':('top:'+item.position.y))+';transform:rotate('+item.position.rotate+') translateX('+item.position.translateX+');'"
           class="light-container">

        <!--        转运呼吸灯-->
        <div :class="'arrow-container '+(item.active?'active':'')">
          <!--        <div :class="'arrow-container '+(item.active?'':'active')">-->
          <div>
            <!--            PLC手动完成 for test only-->
            <div v-if="testFlag&&item.active" class="transfer-button">
              <!--            <div v-if="false" class="transfer-button">-->
              <el-button size="mini" type="primary" @click="manualFinish(item)">完成拉动</el-button>
            </div>
            <el-popover
              v-if="testFlag"
              placement="bottom"
              title="PLC调动信息"
              trigger="click"
              width="200"
            >
              <div>PLC发送地址：{{ plcSendInfo[item.processSeq] ? plcSendInfo[item.processSeq].address : "-" }}</div>
              <div>请求参数：{{ plcSendInfo[item.processSeq] ? plcSendInfo[item.processSeq].sendParam : "-" }}</div>
              <div>请求状态：{{ plcSendInfo[item.processSeq] ? plcSendInfo[item.processSeq].status : "-" }}</div>
              <div>拉动时间：{{ plcSendInfo[item.processSeq] ? plcSendInfo[item.processSeq].transTime : "-" }}</div>
              <div slot="reference" class="right-arrow" style="cursor: default;">&#x2794;</div>
            </el-popover>
            <div v-else class="right-arrow" style="cursor: default;">&#x2794;</div>

            <!--              <div class="arrow-line"></div>
                          <div class="arrow-head" v-if="!item.position.reverse"></div>
                          <div class="arrow-butt" v-if="item.position.reverse"></div>-->
          </div>
        </div>
      </div>
      <img alt="" src="@/images/assemblyBoxLine.png" style="width:100%;z-index:1;opacity:0.7;">
    </el-row>
    <el-row class="robInfo" style="margin-top: 10px;">
      <div v-for="(item,index) in robList" v-if="index%2===1"
           :key="index"
           :style="'left:'+item.location.x+';'"
           class="robItem">
        <rob-tag :plan-takt="(taskProgress.standardBeat?parseInt(taskProgress.standardBeat):0)"
                 :seam-info="seamSendInfo" :tag-data="item"
                 :test-flag="testFlag"></rob-tag>
      </div>
    </el-row>
    <!--修改为3D建模显示 @shy 2025.5.11-->
    <!-- 工序流程部分-->
    <!--    <div style="display: flex;align-items: center">-->
    <!--      <el-col :span="3" :xs="24" style="min-width: 160px">-->
    <!--        <div style="margin: 0 30px">-->
    <!--          <div style="display: flex; align-items: center;">-->
    <!--            <span style="font-size: 18px;font-weight: bold;white-space: nowrap;">停机：</span>-->
    <!--            <div style="margin-left: 15px"><img src='@/images/停机.png' class="image" alt=""></div>-->
    <!--          </div>-->
    <!--          <div style="display: flex; align-items: center; margin-top: 8px">-->
    <!--            <span style="font-size: 18px;font-weight: bold;white-space: nowrap;">待机：</span>-->
    <!--            <div style="margin-left: 15px"><img src='@/images/待机.png' class="image" alt=""></div>-->
    <!--          </div>-->
    <!--          <div style="display: flex; align-items: center; margin-top: 8px">-->
    <!--            <span style="font-size: 18px;font-weight: bold;white-space: nowrap;">空载：</span>-->
    <!--            <div style="margin-left: 15px"><img src='@/images/空载.png' class="image" alt=""></div>-->
    <!--          </div>-->
    <!--          <div style="display: flex; align-items: center; margin-top: 8px">-->
    <!--            <span style="font-size: 18px;font-weight: bold;white-space: nowrap;">焊接：</span>-->
    <!--            <div style="margin-left: 15px"><img src='@/images/焊接.png' class="image" alt=""></div>-->
    <!--          </div>-->
    <!--          <div style="display: flex; align-items: center; margin-top: 8px">-->
    <!--            <span style="font-size: 18px;font-weight: bold;white-space: nowrap;">报警：</span>-->
    <!--            <div style="margin-left: 15px"><img src='@/images/报警.png' class="image" alt=""></div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </el-col>-->

    <!--      <el-col :span="21" :xs="24">-->
    <!--        &lt;!&ndash;第一部分 &ndash;&gt;-->
    <!--        <el-row v-for="(line, lineIndex) in lineList" :key="lineIndex">-->
    <!--          <div class="box" style="display: flex;white-space: nowrap;margin-bottom: 10px;">-->
    <!--            <div class="box1 children1">-->
    <!--              {{line.twoLineName}}-{{line.threeLineName}}-->
    <!--            </div>-->
    <!--            <div class="box1 children2" style="overflow: auto;">-->
    <!--              <el-col :span="4" v-for="(process, processIndex) in line.processList" :key="processIndex" :xs="24" class="middle">-->
    <!--                <div style="height: 50px;" class="card" :key="`card-${processIndex}`">-->
    <!--                  <div style="padding: 0px;" class="cardInfo1" align="center" :class="{'blue-background': isBlue(process.jobType)}">-->
    <!--                    <span>{{process.processName}}</span><br>-->
    <!--                  </div>-->
    <!--                  <div class="cardInfo2"  v-if="processIndex !== line.processList.length - 1">-->
    <!--                    <img src='@/images/jiantou.jpg' class="image1">-->
    <!--                  </div>-->
    <!--                  <div v-if="isBlue(process.jobType)">-->
    <!--                    <div v-for="(drive, deviceIndex) in process.znddDevices" :key="deviceIndex">-->
    <!--                        <div :class="getIndexClass(process.znddDevices.length,deviceIndex)">-->
    <!--                          <el-tooltip class="item" effect="dark" :content="drive.deviceType+','+drive.deviceName" :placement="getPlacementImg(deviceIndex)">-->
    <!--                            <img :src="getImageSrc(drive.deviceStatus)" class="image" alt="">-->
    <!--                          </el-tooltip>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                  </div>-->
    <!--                </div>-->
    <!--              </el-col>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </el-row>-->
    <!--      </el-col>-->

    <!--    </div>-->

    <!--隐藏下方表格 @shy 2025.5.11-->
    <!--

        <el-divider class="el-divider2"></el-divider>
        <div class="m50">
          &lt;!&ndash; 下方表格 &ndash;&gt;
          <el-table v-if="lineList.length === 1" border style="margin-top: 20px;" :data="transData"
                    :cell-style="customCellStyle" :row-class-name="tableRowClassName">
            <el-table-column v-for="(item, index) in transTitleOne" :label="item" span="2" :key="index"  align="center">
              <template slot-scope="scope">
                {{scope.row[index]}}
              </template>
            </el-table-column>
          </el-table>
          <el-table v-else-if="lineList.length > 1" border style="margin-top: 20px;" :data="transData"
                    :cell-style="customCellStyle"
                    :header-cell-style="handerMethod" :row-class-name="tableRowClassName">
            <el-table-column v-for="(item, index) in transTitle" :label="item" span="2" :key="index"  align="center">
              <template slot-scope="scope">
                {{scope.row[index]}}
              </template>
            </el-table-column>
          </el-table>
        </div>-->

    <el-dialog :visible.sync="laborAllocateFlag" append-to-body title="人员分配" width="500px">
      <el-form ref="form" label-width="80px">
        <el-form-item label="工单名称: " prop="workOrderName">
          {{ laborAllocate.workOrderName }}
        </el-form-item>
        <el-form-item label="工单编号: " prop="workOrderNo">
          {{ laborAllocate.workOrderNo }}
        </el-form-item>
        <el-form-item label="工序名称: " prop="processName">
          {{ laborAllocate.processName }}
        </el-form-item>
        <el-form-item label="工序顺序: " prop="processNo">
          {{ laborAllocate.processNo }}
        </el-form-item>
        <el-form-item label="当前人员: ">
          <el-checkbox-group v-model="laborAllocate.currentIds">
            <el-checkbox v-for="p in laborAllocate.current" v-bind:key="p.id" :label="p.id" :value="p.id" disabled>
              {{ p.employeeName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="需要分配:" prop="allocateNo">
          {{ laborAllocate.allocateNo + "人" }}
        </el-form-item>
        <el-form-item label="分配人员: ">
          <el-checkbox-group v-model="laborAllocate.allocateList" @change="handleCheckboxChange(laborAllocate)">
            <el-checkbox v-for="p in waitLaborList" v-bind:key="p.id" :label="p.id" :value="p.id">{{ p.employeeName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAllocate(laborAllocate)">确 定</el-button>
        <el-button @click="laborAllocateFlag=false;">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :before-close="handleClose"
      :direction="direction"
      :title="childTitle"
      :visible.sync="childFlag"
      size="70%">

      <div>
        <jiaren ref="kaigongs" :showButton="showButton" @closeDrawer="closeDrawer"></jiaren>
      </div>

    </el-drawer>


  </div>


</template>

<script>
import {
  ctlListen,
  dispatchSeam,
  getLineData,
  getProcessInfo,
  getPullInfo,
  getSendPlcStatusInfo,
  getSendWeldSeamVoInfo,
  getTaskProgress,
  getWorkOrderData,
  manualFinish,
  manualAlllFinish,
  manualPull,
  selectSolutionList,
  selectTaskList
} from "@/api/zndd/intelligence/pageHome";
import jiaren from '@/views/zndd/intelligence/jiaren/index.vue'
import RobTag from "@/views/tool/index/robTag.vue";
import RealDateTime from "@/views/tool/index/realDateTime.vue";
import {peopleShang, peoplesList} from "@/api/zndd/intelligence/jiaren";

export default {
  name: 'pageHome',
  components: {
    RealDateTime,
    RobTag,
    'jiaren': jiaren,
  },
  data() {
    return {
      testFlag: true,
      isSameDay: false,
      // today: new Date().toLocaleDateString(),
      closes: false,
      //二级界面标题
      childTitle: "调度加人",
      //二级界面是否显示
      childFlag: false,
      direction: 'rtl',
      dialogFormVisible: false,
      // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
      // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
      originTitle: ['工单编号', '任务开始时间', '已进行时间', '任务剩余时间', '当前任务状态', '工序剩余任务'], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      transTitle: [], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transTitleOne: [], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transData: [],
      taskList: [],
      solutionList: [],
      lineList: [],
      workOrderList: [],
      znddWorkOrderStatusS: [],
      selectedTime: '5秒钟',
      allTimes: ['5秒钟', '10秒钟', '20秒钟', '30秒钟', '40秒钟', '50秒钟'],
      processes: [],
      imageTemp: '',
      placementImg: '',
      mergeColumn: null,
      showButton: false, // 初始设为不显示按钮
      // 查询参数
      queryParams: {},
      // 进度条控制 @shy 2025.5.11
      progressCtl: {
        task: 0, //任务达成数量
        taskName: "", //任务名称
        taskTitle: "0/0", //任务进度条显示
        isProd: false, //是否有生产任务
        isStart: false, //是否开始生产
        lagTime: 0,
        shiftTime: 0,
        timer: null,
        currentLabor: 0,
        requiredLabor: 0,
      },
      progressColors: [
        {color: '#ff0000', percentage: 33.33},
        {color: '#e6a23c', percentage: 66.66},
        {color: '#008b0f', percentage: 99.99},
        {color: '#1989fa', percentage: 100},
      ], //进度条颜色控制
      laborListColors: [{color: '#ff0000', percentage: 99.99}, {color: '#008b0f', percentage: 100}],
      //任务进度信息
      taskProgress: {
        totalFinished: 0,
        currentTodayProgress: null,
        currentTodaySum: null,
        pullCountdown: null,
        realTimeBeat: null,
        standardBeat: null,
        startWorkStatus: null,
        flag: null,
        processNeedPeoples: []
      },
      processInfo: [],
      robList: [],
      pullInfo: [],
      scrollInterval: null,
      isPaused: false,
      scrollSpeed: 1, // 滚动速度（像素/帧）
      procPos: [], //工位灯
      processDict: {}, //processInfo的processSequence字典表
      pullPos: [], //拉动灯
      pullPosDict: { //拉动灯字典表
        "1": [{
          x: "8.15%",
          y: "0",
          rotate: "0deg",
          translateX: "0"
        }],
        "2": [{
          x: "16.35%",
          y: "0",
          rotate: "0deg",
          translateX: "0"
        }],
        "3": [{
          x: "25%",
          y: "0",
          rotate: "0deg",
          translateX: "0"
        }],
        "4": [{
          x: "29.5%",
          y: "50%",
          rotate: "90deg",
          translateX: "-50%"
        }],
        "5": [{
          x: "35.575%",
          y: "bottom",
          rotate: "0deg",
          translateX: "0"
        }],
        "6": [{
          x: "46.725%",
          y: "bottom",
          rotate: "0deg",
          translateX: "0"
        }, {
          x: "51.8%",
          y: "50%",
          rotate: "270deg",
          translateX: "50%"
        }],
        "7": [{
          x: "56.05%",
          y: "0",
          rotate: "0deg",
          translateX: "0"
        }],
        "8": [{
          x: "64.65%",
          y: "0",
          rotate: "0deg",
          translateX: "0"
        }],
        "9": [{
          x: "73.5%",
          y: "0",
          rotate: "0deg",
          translateX: "0"
        }],
        "10": [{
          x: "81.9%",
          y: "0",
          rotate: "0deg",
          translateX: "0"
        }],
        "11": [{
          x: "85.8%",
          y: "50%",
          rotate: "90deg",
          translateX: "-50%"
        }],
        "12": [{
          x: "91.4%",
          y: "bottom",
          rotate: "0deg",
          translateX: "0"
        }],
      },
      laborAllocateFlag: false,//分配人工弹出框控制
      laborAllocate: {
        current: [],
        currentIds: [],
        workOrderName: "",
        workOrderNo: "",
        processName: "",
        processNo: "",
        allocateNo: 0,
        allocateList: [],
      },
      waitLaborList: [], //待分配人工列表
      plcSendInfo: {}, //plc发送指令 for test only
      seamSendInfo: {},//焊缝发送接口信息 for test only
      listenFlag: false,//持续监听焊缝标识 for test only
    };
  },
  mounted() {
    // 根据当前页面的标识（如路由路径）来设置 showButton 的值
    const currentRoute = this.$route.path;
    if (currentRoute !== '/src/views/zndd/intelligence/jiaren/index') {
      this.showButton = true;
    }
    this.updateIsSameDay();

  },
  methods: {

    updateIsSameDay() {
      if (this.taskList.length > 0) {
        const firstTaskStartTime = new Date(this.taskList[0].startTime).toLocaleDateString();
        if (firstTaskStartTime != new Date().toLocaleDateString()) {
          this.isSameDay = true;
        } else {
          this.isSameDay = false;
        }
      }
    },
    closeDrawer() {
      this.childFlag = false;
      this.closes = true;
    },
    openKai(row) {
      this.childFlag = true;
      this.$nextTick(() => {
        this.$refs.kaigongs.jrMethods(row.name);
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    // 表格自动滚动
    autoScrollFn() {
      clearInterval(this.scrollTimer);
      this.$nextTick(() => {
        const tBody = this.$refs.myTable.bodyWrapper;
        // 当可视窗口高度大于表格高度时，不滚动
        if (tBody.clientHeight > tBody.scrollHeight) {
          // console.log(tBody.clientHeight);
          // console.log(tBody.scrollHeight)
          return;
        }
        this.scrollTimer = setInterval(() => {
          tBody.scrollTop += 1; // 每次上滑一个像素
          // 当滚动到最底部(可视高度+距离顶部=整个高度)时，从头开始滚
          if (tBody.clientHeight + Math.round(tBody.scrollTop) === tBody.scrollHeight) {
            tBody.scrollTop = 0;
          }
        }, (1000 / 60) * 3); // 1000 / 60
      });
    },
    stopScrollFn() {
      clearInterval(this.scrollTimer);
      this.scrollTimer = null;
    },
    customCellStyle({row, column, rowIndex, columnIndex}) {
      // 判断是否是最后一行
      if (rowIndex === this.transData.length - 1) {
        return {borderTop: '2px solid'};
      }
      return {};
    },
    // 下方表格的样式
    tableRowClassName({rowIndex}) {
      if (rowIndex === this.transData.length - 1) {
        return 'last-row';
      }
      return '';
    },
    //灯泡提示
    getPlacementImg(index) {
      if (index === 0) {
        return this.placementImg = 'bottom';
      } else if (index === 1) {
        return this.placementImg = 'top';
      } else if (index === 2) {
        return this.placementImg = 'bottom';
      } else if (index === 3) {
        return this.placementImg = 'top';
      }

    },
    getIndexClass(index1, index2) {
      // 根据下标的奇偶性返回对应的类名
      if (index1 <= 2) {
        if (index2 === 0) {
          return 'lamp1';
        } else if (index2 === 1) {
          return 'lamp2';
        }
      } else if (index1 > 2) {
        if (index2 === 0) {
          return 'even-index2';
        } else if (index2 === 1) {
          return 'even-index1';
        } else if (index2 === 2) {
          return 'odd-index2';
        } else if (index2 === 3) {
          return 'odd-index1';
        }
      }
    },
    getLamdClass(index) {
      // 根据下标的奇偶性返回对应的类名
      if (index % 2 === 0) {
        return 'lamp2';
      } else {
        return 'lamp1';
      }
    },
    //隐藏表头
    handerMethod({row, column, rowIndex, columnIndex}) {
      if (row[0].level == 1) {
        //这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
        for (let i = 1; i <= this.processes.length; i++) {
          row[i].colSpan = this.lineList.length;
        }
        if (columnIndex === 0) {
          return {display: ''}
        }
      }
    },
    isBlue(device) {
      return device === "2";
    },
    getImageSrc(device) {
      switch (device) {
        case '1':
          return require("@/images/停机.png");
        case '2':
          return require("@/images/待机.png");
        case '3':
          return require("@/images/空载.png");
        case '4':
          return require("@/images/焊接.png");
        case '5':
          return require("@/images/报警.png");
        default:
          return '';
      }
    },
    //定时器相关
    startTimer() {
      this.timer = setInterval(() => {
        // 在这里添加你需要定时执行的逻辑
        // this.getTaskList();
        // this.updateIsSameDay();
        this.getSolutionList();
        // this.getLineData();
        // this.getWorkOrderData();
        this.getTaskProgress();
        this.getProcessInfo();
        this.getPullInfo();
        this.getSendWeldSeamVoInfo();
        this.getSendPlcStatusInfo();
        // console.log('定时器触发');
      }, this.timeInMilliseconds);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    resetTimer() {
      this.clearTimer();
      this.startTimer();
    },
    handleCommand(command) {
      this.selectedTime = command;
    },
    //查询任务信息列表
    getTaskList() {
      selectTaskList().then(response => {
          this.taskList = response;
        }
      );
    },
    //查询任务调度数据
    getSolutionList() {
      selectSolutionList().then(response => {
          if (response) {
            this.solutionList = response.code == 500 ? [] : response;
          }
        }
      );
    },
    //查询产线数据
    getLineData() {
      getLineData().then(response => {
          this.lineList = response;
          this.processes = response.flatMap(line => line.processList.map(process => process.processName));
          // console.log(this.processes)
          // 动态生成 transTitle
          this.updateTransTitle();
        }
      );
    },
    //查询工单数据
    getWorkOrderData() {
      getWorkOrderData().then(response => {
          this.workOrderList = response;
          // 对每个工单数据进行格式化
          this.workOrderList.forEach(item => {
            item.workOrderStauts = this.znddWorkOrderFormatter(item.workOrderStauts);
          });
        }
      );
    },
    //格式化工单类型类型
    znddWorkOrderFormatter(info) {
      const znddWorkOrder = this.znddWorkOrderStatusS.find(znddWorkOrder => znddWorkOrder.dictValue === info);
      return znddWorkOrder ? znddWorkOrder.dictLabel : '';
    },
    //获取产线信息
    updateTransTitle() {
      // 生成 transTitle
      this.transTitle = ['', ...this.processes, ...Array((this.processes.length) * (this.lineList.length - 1)).fill('')];
      this.transTitleOne = ['', ...this.processes];
    },
    // 获取任务进度信息 @shy 2025.5.12
    getTaskProgress() {
      getTaskProgress().then(response => {
        if (response) {
          this.taskProgress = response;
          //配置页面中的显示元素
          this.progressCtl.isProd = response.flag && response.flag == "1";
          this.progressCtl.isStart = response.startWorkStatus && response.startWorkStatus == "1";
          this.progressCtl.totalFinished = this.cleanIntValue(response.totalTaskSum);
          clearInterval(this.progressCtl.timer);
          if (this.progressCtl.isStart) {
            if (response.processNeedPeoples && response.processNeedPeoples.length > 0) {
              let current = 0;
              let required = 0;

              for (let process of response.processNeedPeoples) {
                current += this.cleanIntValue(process.currentPeoples);
                required += this.cleanIntValue(process.needPeoples);
              }
              this.progressCtl.currentLabor = current;
              this.progressCtl.requiredLabor = current + required;
            } else {
              this.progressCtl.currentLabor = 0;
              this.progressCtl.requiredLabor = 0;
            }
            this.progressCtl.task = this.cleanIntValue(response.currentTodayProgress) / this.cleanIntValue(response.currentTodaySum) * 100;
            this.progressCtl.taskTitle = this.cleanIntValue(response.currentTodayProgress) + "/" + this.cleanIntValue(response.currentTodaySum);
            this.progressCtl.lagTime = this.cleanIntValue(response.realTimeBeat) - this.cleanIntValue(response.standardBeat);
            this.progressCtl.shiftTime = this.cleanIntValue(response.pullCountdown);
            this.progressCtl.timer = setInterval(() => {
              /*if (this.progressCtl.shiftTime <= 0) {
                clearInterval(this.progressCtl.timer);
              } else {
                this.progressCtl.shiftTime--;
              }*/
              this.progressCtl.shiftTime--;
            }, 1000)
          }
        }
      })
    },
    // 获取焊缝信息 @shy 2025.5.12
    getProcessInfo() {
      getProcessInfo().then(response => {
          this.processInfo = response;
          // 增加产线信息逻辑 @shy 2025.5.11
          this.robList = [];
          this.procPos = [];
          for (let i = 0; i < response.length; i++) {

            //增加机器人信息 @shy 2025.5.11
            if (response[i].znddProcess.processType == "1" && response[i].deviceWeldInfoList && response[i].deviceWeldInfoList.length > 0) {
              for (let rob of response[i].deviceWeldInfoList) {
                let weldLength = 0;
                if (rob.weldInfoList && rob.weldInfoList.length > 0) {
                  for (let seam of rob.weldInfoList) {
                    weldLength += parseInt(seam.weldLength);
                  }
                }
                let seamListStr = "[";
                if (rob.weldInfoList && rob.weldInfoList.length > 0) {
                  for (let seam of rob.weldInfoList) {
                    seamListStr += seam.weldNo + ", ";
                  }
                }
                seamListStr += "]";
                let seamFinishListStr = "[";
                if (rob.completeWeldList && rob.completeWeldList.length > 0) {
                  for (let seam of rob.completeWeldList) {
                    seamFinishListStr += seam.weldNo + ", ";
                  }
                }
                seamFinishListStr += "]";
                let robInfo = {
                  name: rob.deviceType,
                  robId: rob.deviceId,
                  status: rob.deviceStatus,
                  seamNum: rob.weldNum ? rob.weldNum : 0,
                  seamLength: weldLength + "mm",
                  seamList: seamListStr,
                  seamFinishList: seamFinishListStr,
                  totalExpectTime: rob.expectTime ? (this.getTimeDiff(0, this.cleanIntValue(rob.expectTime))) : "-",
                  takt: parseInt(rob.expectTime ? rob.expectTime : 0),
                  location: {
                    x: (parseFloat(rob.xaxis) * 100).toFixed(2) + "%",
                    y: parseInt(rob.yaxis),
                  },

                };
                this.robList.push(robInfo);
              }
            }

            //添加路径图信息 @shy 2025.5.13
            this.processDict[response[i].znddProcess.productionLineSequence + ""] = i
            this.procPos.push({
              title: response[i].znddProcess.productionLineSequence + "",
              processName: response[i].znddProcess.processName,
              processType: parseInt(response[i].znddProcess.processType),
              initialPeople: response[i].znddProcess.initialPeople,
              currentPeople: response[i].znddProcess.currentPeople,
              maxPeople: response[i].znddProcess.maxPeople,
              active: response[i].workPieceStatus == "1" ? true : false,
              carNum: response[i].workPieceStatus == "1" ? response[i].carNum : "",
              prodNum: response[i].workPieceStatus == "1" ? response[i].productNo : "",
              prodName: response[i].workPieceStatus == "1" ? response[i].productName : "",
              position: {
                x: (parseFloat(response[i].znddProcess.xAxis) * 100).toFixed(2) + "%",
                y: parseFloat(response[i].znddProcess.yAxis).toFixed(2) == 1 ? "bottom" : ((parseFloat(response[i].znddProcess.yAxis) * 100).toFixed(2) + "%"),
                rotate: "0deg",
                translateX: "0",
                popPos: parseFloat(response[i].znddProcess.yAxis) > 0.5 ? "top" : "bottom",
              },
            });
          }
        }
      )
    },
    // 获取拉动信息 @shy 2025.5.12
    getPullInfo() {
      getPullInfo().then(response => {
          this.pullInfo = response;
          this.pullPos = []
          for (let trans of response) {
            if (this.pullPosDict[trans.processSequence + ""]) {
              for (let position of this.pullPosDict[trans.processSequence + ""]) {
                this.pullPos.push({
                  processSeq: trans.processSequence + "",
                  active: trans.pullStatus == "1" || (trans.processStatus && trans.processStatus == "Start"),
                  position: position,
                  pullId: trans.pullId ? trans.pullId : ""
                })
              }
            }
          }
        }
      )
    },
    //给进度条中间赋值
    laborFormat() {
      return this.progressCtl.currentLabor + "/" + this.progressCtl.requiredLabor;
    },

    taskFormat() {
      return this.progressCtl.taskTitle;
    },
    stepFormat(item) {
      return this.cleanIntValue(item.currentPeoples) + "/" + (this.cleanIntValue(item.needPeoples) + this.cleanIntValue(item.currentPeoples));
    },
    //计算拉动倒计时和生产节拍背景色方法 @shy2025.5.14
    getBGstyle(index) {
      let color = "";
      if (index === 0) {
        color += (this.progressCtl.isStart ? (this.progressCtl.lagTime > 60 ? '#ff0000' : (this.progressCtl.lagTime > 0 ? '#E6A23C' : '#008b0f')) : '#ffffff');
      } else {
        color += (this.progressCtl.isStart ? (this.progressCtl.shiftTime > 60 ? '#008b0f' : (this.progressCtl.shiftTime > 30 ? '#E6A23C' : '#ff0000')) : '#ffffff')
      }
      return "background:" + color + ";box-shadow:0 0 15px 0 " + color + ";";
    },
    //手动触发PLC成功接口
    manualFinish(item) {
      this.$modal.loading("正在完成拉动，请稍候");
      manualFinish({
        "id": item.pullId + "",
        "state": "Finish",
        "errorInfo": ""
      }).then(response => {
        this.getPullInfo();
        this.$modal.closeLoading();
        if (response && response.code == 200) {
          this.$message.success("完成拉动成功")
        } else {
          this.$message.error("完成拉动失败！原因：" + response.msg || "未知原因");
        }
      })
    },
    //手动触发PLC成功接口
    manualAllFinish() {
      this.$modal.loading("正在完成拉动，请稍候");
      this.getPullInfo();
      const dataList = this.pullPos.map(item => ({
        id: item.pullId + "",
        state: "Finish",
        errorInfo: ""
      }));
      manualAlllFinish(dataList).then(response => {
        this.getPullInfo();
        this.$modal.closeLoading();
        if (response && response.code == 200) {
          this.$message.success("完成拉动成功")
        } else {
          this.$message.error("完成拉动失败！原因：" + response.msg || "未知原因");
        }
      })
    },
    cleanIntValue(value) {
      return (value ? parseInt(value) : 0);
    },
    //计算人工百分比
    getLaborPerc(item) {
      let current = this.cleanIntValue(item.currentPeoples);
      let total = current + this.cleanIntValue(item.needPeoples);
      return current / total * 100;
    },
    getTotalLaborPerc() {
      return this.progressCtl.requiredLabor == 0 ? 0 : (this.progressCtl.currentLabor / this.progressCtl.requiredLabor * 100);
    },
    handleCheckboxChange(allocate) {
      // 检查选中的个数是否超出最大限制
      if (allocate.allocateList.length > allocate.allocateNo) {
        allocate.allocateList.pop();
        this.$message.warning('最多选中' + allocate.allocateNo + '个人员');
      }
    },
    getLaborList() {
      peoplesList().then(res => {
        this.waitLaborList = res;
      });
    },
    //打开人员分配弹窗
    openLaborAllocate(process) {
      if (process.znddWorkOrder) {
        let currentIds = []
        for (let i = 0; i < process.initPeoplesList.length; i++) {
          currentIds.push(process.initPeoplesList[i].id);
        }
        this.laborAllocate = {
          workOrderId: process.znddWorkOrder.id,
          current: process.initPeoplesList,
          currentIds: currentIds,
          workOrderName: process.znddWorkOrder.workOrderName,
          workOrderNo: process.znddWorkOrder.workOrderNo,
          processName: process.processName,
          processNo: "工序" + process.processSequence,
          allocateNo: this.cleanIntValue(process.needPeoples),
          allocateList: [],
        }
        this.getLaborList();
      }
      this.laborAllocateFlag = true;
    },
    //提交人员分配
    submitAllocate(allocate) {

      if (allocate.allocateList.length < allocate.allocateNo) {
        this.$message.warning('您还需选择' + (allocate.allocateNo - allocate.allocateList.length) + '个人员');
      } else {

        let data = {
          id: allocate.workOrderId,
          peoIds: allocate.allocateList
        }
        peopleShang(data).then(response => {
          this.$modal.msgSuccess("加人成功");
          this.laborAllocateFlag = false;
          this.getTaskProgress();
          this.getProcessInfo();
        });
      }

    },
    //获取发送焊缝信息状态 for test only @shy 2025.5.29
    getSendWeldSeamVoInfo() {
      getSendWeldSeamVoInfo().then(response => {
        if (response && response.length > 0) {
          for (let send of response) {
            this.$set(this.seamSendInfo, (send.znddDevice.id + ""), {
              sendAddress: send.address,
              sendParam: send.sendParam,
              sendStatus: (this.cleanIntValue(send.status) == 1 ? "成功" : (this.cleanIntValue(send.status) == 2 ? "失败" : ""))
            })
          }
        }
      });
    },
    //获取发送拉动状态 for test only @shy 2025.5.29
    getSendPlcStatusInfo() {
      getSendPlcStatusInfo().then(response => {
        if (response && response.length > 0) {
          for (let send of response) {
            this.plcSendInfo[send.znddProcess.productionLineSequence + ""] = {
              address: send.address,
              sendParam: send.sendParam,
              status: this.cleanIntValue(send.status) == 1 ? "成功" : (this.cleanIntValue(send.status) == 2 ? "失败" : send.status),
              transTime: (send.znddProcess.beginPullTime && send.znddProcess.endPullTime ? this.getTimeDiff(send.znddProcess.beginPullTime, send.znddProcess.endPullTime) : "-")
            }
          }
        }
      });
    },
    //测试用一键调度 @shy 2025.6.8
    dispatchSeam() {
      dispatchSeam().then(response => {
        if (!response) {
          this.$message.warning('请求失败：' + response);
        }
      });
    },
    //测试用一键拉动 @shy 2025.6.8
    manualPull() {
      manualPull(
        {}
      ).then(response => {
        if (!response) {
          this.$message.warning('请求失败：' + response);
        } else {
          this.$message.success('操作成功');
        }
      })
    },
    //持续监听
    ctlListen() {
      ctlListen(
        {
          "mode": this.listenFlag ? 2 : 1
        }
      ).then(response => {
        if (!response) {
          this.$message.warning('请求失败：' + response);
        } else {
          this.listenFlag = !this.listenFlag;
          this.$message.success('操作成功');
        }
      })
    },
    getTimeDiff(start, end) {
      let seconds = end;
      if (start !== 0) {
        seconds = Math.floor((new Date(end) - new Date(start)) / 1000);
      }
      let minutes = Math.floor(seconds / 60);
      seconds = seconds % 60;
      let format = (num) => num.toString().padStart(2, '0');
      return (`${format(minutes)}分${format(seconds)}秒`)
    }
  },
  computed: {
    //空白列计算
    taskListWithEmptyRows() {
      const emptyRowsNeeded = 3 - this.taskList.length;
      return this.taskList.concat(Array(Math.max(emptyRowsNeeded, 0)).fill({}));
    },
    solutionListWithEmptyRows() {
      const emptyRowsNeeded = 3 - this.solutionList.length;
      return this.solutionList.concat(Array(Math.max(emptyRowsNeeded, 0)).fill({}));
    },
    timeOptions() {
      return this.allTimes.filter(time => time !== this.selectedTime);
    },
    timeInMilliseconds() {
      const seconds = parseInt(this.selectedTime.replace('秒钟', ''), 10);
      return seconds * 1000;
    },
  },
  created() {
    this.autoScrollFn();
    this.stopScrollFn();
    this.getDicts("zndd_worker_order_status").then(response => {
      this.znddWorkOrderStatusS = response.data;
    });
    // 获取任务信息列表
    // this.getTaskList();
    // 获取解决方案列表
    this.getSolutionList();
    // 获取产线数据
    // this.getLineData();
    // 获取工单数据
    // this.getWorkOrderData();
    // 数组按矩阵思路, 变成转置矩阵

    //增加新接口调用@shy 2025.5.13
    this.getTaskProgress();
    this.getProcessInfo();
    this.getPullInfo();
    this.getSendWeldSeamVoInfo();
    this.getSendPlcStatusInfo();
    // 初始化定时器
    this.startTimer();
  },
  beforeDestroy() {
    // 清除定时器
    this.clearTimer();
  },
  watch: {
    selectedTime() {
      // 当 selectedTime 改变时，重新设置定时器
      this.resetTimer();
    },
    processes: {
      handler(newVal) {
        this.updateTransTitle();
      },
      deep: true
    },
  },
  beforeUpdate() {
    let matrixData = this.workOrderList.map((row) => {
      let arr = []
      for (let key in row) {
        // 判空处理
        arr.push(row[key] !== undefined && row[key] !== null ? row[key] : '')
      }
      return arr
    })
    // 加入标题拼接最终的数据
    if (matrixData.length > 0 && Array.isArray(matrixData[0])) {
      this.transData = matrixData[0].map((col, i) => {
        return [this.originTitle[i], ...matrixData.map((row) => {
          // 判空处理
          return row[i] !== undefined && row[i] !== null ? row[i] : '';
        })];
      });
      // console.log(this.transData);
    } else {
      this.transData = []; // 或者设置为其他默认值
    }
  },
}
</script>

<style>

.el-table__row {
  height: 30px; /* 设置需要的高度 */
}

.blue-background {
  background-color: #156bcd;
}

.blue-background span {
  color: white; /* 设置文字颜色为白色 */
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 12px; /* 水平滚动条的宽度 */
  height: 12px; /* 垂直滚动条的高度 */
  cursor: pointer; /* 鼠标靠近滚动条时变为小手样式 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的颜色 */
  cursor: pointer; /* 鼠标靠近滚动条轨道时变为小手样式 */
}

::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块的颜色 */
  border-radius: 6px; /* 滚动条滑块的圆角 */
  cursor: pointer; /* 鼠标靠近滚动条滑块时变为小手样式 */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条滑块悬停时的颜色 */
  cursor: pointer; /* 鼠标悬停在滚动条滑块上时仍保持小手样式 */
}

.image {
  width: 38px;
  height: 38px;
  display: block;
  background-size: cover;
}

.image1 {
  width: 50px;
  height: 20px;
  display: block;
  background-size: cover;
  /*  margin: 15px 40px; !* 调整图片的上下间距 *!*/
}

/* 刷新频率样式 */
.titleOverview {
  margin-right: 371px;
  font-size: 35px;
  color: #4a6d9a;
}

.dropdown {
  float: right;
}

.frequency {
  font-size: 14px;
  margin-right: 15px;
}

/*分割线*/
.el-divider1 {
  margin-top: 15px;
  margin-bottom: 40px;
}

.el-divider2 {
  margin-top: 30px;
  margin-bottom: 0px;
}

/*流程样式*/
.card {
  display: flex;
  flex-direction: row;
  position: relative; /* 添加相对定位 */
}

.cardInfo1 {
  border: 2px solid #156bcd; /* 添加边框 */
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  /*  float: left;*/
  min-width: 130px; /* 设置最小宽度 */
  white-space: nowrap;
}

.cardInfo2 {
  /*  float: right;*/
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-width: 70px; /* 设置最小宽度 */
  width: 70px;
}

.lamp1 {
  position: absolute;
  left: 25%; /* 水平居中 */
  transform: translateX(-20%); /* 调整水平位置 */
  top: 52px; /* 调整垂直位置，使其在 cardInfo1 上方 */
}

.lamp2 {
  position: absolute;
  left: 25%; /* 水平居中 */
  transform: translateX(-20%); /* 调整水平位置 */
  top: -40px; /* 调整垂直位置，使其在 cardInfo1 下方 */
}

.odd-index1 {
  position: absolute;
  left: 45%; /* 水平居中 */
  transform: translateX(-50%); /* 调整水平位置 */
  top: -40px; /* 调整垂直位置，使其在 cardInfo1 下方 */
}

.even-index1 {
  position: absolute;
  left: 15%; /* 水平居中 */
  transform: translateX(-50%); /* 调整水平位置 */
  top: -40px; /* 调整垂直位置，使其在 cardInfo1 下方 */
}

.odd-index2 {
  position: absolute;
  left: 45%; /* 水平居中 */
  transform: translateX(-50%); /* 调整水平位置 */
  top: 52px; /* 调整垂直位置，使其在 cardInfo1 上方 */
}

.even-index2 {
  position: absolute;
  left: 15%; /* 水平居中 */
  transform: translateX(-50%); /* 调整水平位置 */
  top: 52px; /* 调整垂直位置，使其在 cardInfo1 上方 */
}

.middle {
  height: 100px;
  min-width: 200px;
}

.children1 {
  /*  float: left;*/
  margin-top: 65px;
  font-size: 13px;
  width: 12%;
  margin-right: 12px;
  min-width: 150px;
}

.children2 {
  height: 100%;
  width: 100%;
  display: flex;
  /*  float: left;*/
}

/*表格样式*/
.last-row {
  height: 80px;
}

.top-box .el-table__row {
  height: 50px; /* 设置每一行的高度 */
}

.children2 .middle {
  margin-top: 50px; /* 设置每一行的高度 */
}

/* 当前生产节拍样式 @shy 2025.5.11 */
.text-hl {
  padding: 5px 10px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 #000000;
}

.text-title {
  text-align: center;
  padding: 0 5px 5px 5px;
  font-size: 20px;
}

.robInfo {
  width: 100%;
}

.robItem {
  display: inline-block;
  position: relative;
  width: 0;
}


.arrow-container {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}


@keyframes arrow-breathe {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.breathing-light {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ff0000;
  box-shadow: 0 0 10px #ff0000;
  transition: all 0.5s ease;
}

.breathing-light.active {
  animation: light-breathe 2s infinite ease-in-out;
}

.breathing-light:not(.active) {
  box-shadow: 0 0 5px #ff0000;
}

@keyframes light-breathe {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
    box-shadow: 0 0 5px #ff0000;
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 20px #ff0000;
  }
}

.light-line {
  position: relative;
}

.light-container {
  position: absolute;
  z-index: 2;
}

.process-title {
  position: absolute;
  line-height: 40px;
  height: 40px;
  width: 40px;
  text-align: center;
  z-index: 999;
  color: #fff;
}

.right-arrow {
  height: 40px;
  width: 40px;
  font-size: 40px;
  line-height: 40px;
  font-weight: bold;
  color: #008b0f;
  display: inline-block;

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.arrow-container.active .right-arrow {
  animation: moveRight 1.5s infinite;
}

@keyframes moveRight {
  0% {
    transform: translateX(-50%);
    opacity: 0.5;
  }
  70% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}

.car-process-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari和Opera */
}

.transfer-button {
  position: absolute;
  top: -40%;
  transform: translateX(-32%);
}

.task-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
}

.current-time {
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-plc-test {
  background-color: #000;
  z-index: 999;
  position: absolute;
  width: 120px;
  padding: 10px;
  color: #fff;
  left: -102%;
  bottom: -260%;
}

.test-buttons {
  position: absolute;
}
</style>
